<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{margin:0;padding:0;}
    #table,th,td{
        margin-left: 30px;
        border-collapse: collapse;
        border:1px solid #333;
    }
    #table{
        width:500px;
        line-height: 50px;
        text-align: center;
    }
    input{
        margin-top: 30px;
        margin-left: 30px;
        margin-bottom: 20px;
        width:200px;
        height:25px;
    }
    </style>
</head>
<body>
    <input type="text" id="shop">
    <input type="text" id="cell">
    <button id="add">提交</button>
    <div>
        <table id="table">
            <thead>
                <tr><th>商品</th><th>名称</th></tr>
            </thead>
            <tbody>
                <tr><td>tmall</td><td>小米</td></tr>
                <tr><td>tmall</td><td>小米</td></tr>
                <tr><td>tmall</td><td>小米</td></tr>
                <tr><td>tmall</td><td>小米</td></tr>
                <tr><td>tmall</td><td>小米</td></tr>
            </tbody>
        </table>
    </div>
    <script>
        var table=document.getElementById("table");
        table.tHead.style.background="#ff2d51";
        var rows=table.tBodies[0].rows;
        for(var i=0;i < rows.length; i++){
            if(i % 2 == 0){
                rows[i].style.background = "#EEEEEE"
            }else{
               rows[i].style.background = "#44CEF6" 
            }
        }
        var shop=document.getElementById("shop");
        var cell=document.getElementById("cell");
        var add=document.getElementById("add");
        add.onclick=function(){
            var shopValue=shop.value;
            var cellValue=cell.value;
            var tr=document.createElement("tr");
            var td=document.createElement("td");
            td.innerHTML=shopValue;
            tr.appendChild(td);
            var td1=document.createElement("td");
            td1.appendChild(td1);
            table.tBodies[0].appendChild(tr);
        }
</script>
</body>
</html>